<template>
  <view class="report-bg">
    <!-- 标题栏 -->
    <view class="report-header">
      <view class="back-btn" @click="onBack">
        <text class="iconfont">&#xe600;</text>
      </view>
      <text class="report-title">白蚁上报</text>
    </view>
    <view class="report-content">
      <view class="content">
        <!-- 表单内容（使用uni-forms组件） -->
        <uni-forms
          ref="formRef"
          :modelValue="form"
          label-width="80px"
          class="report-form"
        >
          <!-- 所在小区 -->
          <uni-forms-item label="所在小区">
            <uni-easyinput v-model="form.address" placeholder="请输入" />
            <!-- <view @click="getLocation">位置</view> -->
          </uni-forms-item>
          <view class="line"></view>
          <!-- 房屋地址 -->
          <uni-forms-item label="房屋地址" name="address" required>
            <uni-easyinput v-model="form.address" placeholder="请输入" />
          </uni-forms-item>
          <view class="line"></view>
          <!-- 问题描述 -->
          <view class="form-item">
            <view class="label">
              <text>问题描述</text>
            </view>
            <uni-easyinput
              class="desc-textarea"
              type="textarea"
              v-model="form.desc"
              maxlength="200"
              placeholder="请描述您的问题（最多200字）"
              autoHeight
            />
            <view class="desc-count" style="text-align: right; color: #808080"
              >{{ form.desc.length }}/200</view
            >
          </view>
          <view class="line"></view>
          <!-- 上传图片 -->
          <view>
            <!-- <text style="color: red; margin-right: 4rpx">*</text> -->
            <text class="fweight">上传图片</text>
            <text class="textGray">（大小限制5M以内）</text>
            <!-- <image
              src="/static/icon.png"
              style="width: 24rpx; height: 24rpx; margin-left: 4rpx"
            /> -->
          </view>

          <!-- 完全替换图片上传实现 -->
          <view class="custom-upload">
            <view class="image-list">
              <view
                v-for="(img, idx) in form.images"
                :key="idx"
                class="image-item"
              >
                <image
                  :src="img"
                  class="upload-image"
                  mode="aspectFill"
                  @click="previewImage(idx)"
                />
                <view class="delete-btn" @click.stop="removeImage(idx)">×</view>
              </view>
              <view
                v-if="form.images.length < 5"
                class="add-image"
                @click="chooseImage"
              >
                <text class="add-icon">+</text>
                <text class="add-text">添加图片</text>
              </view>
            </view>
            <!-- <view class="image-tip">最多上传5张，支持jpg、png格式</view> -->
          </view>
          <view class="line"></view>
          <!-- 上传视频 -->
          <view>
            <text class="fweight">上传视频</text
            ><text class="textGray">（大小限制500M以内）</text>
          </view>
          <view class="custom-upload">
            <view class="video-list">
              <view
                v-if="form.video"
                class="video-item"
                @click.stop="previewVideo"
              >
                <!-- <view class="video-container"> -->
                <!-- <video :src="form.video" controls mode="aspectFill"></video> -->
                <!-- </view> -->
                <video
                  :src="form.video"
                  class="upload-video"
                  :controls="false"
                  mode="aspectFill"
                />
                <view class="delete-btn" @click.prevent="removeVideo">×</view>
              </view>
              <view v-else class="add-video" @click="chooseVideo">
                <text class="add-icon">+</text>
                <text class="add-text">添加视频</text>
              </view>
            </view>
          </view>
          <view class="line"></view>
          <!-- 防治企业（cell风格） -->
          <view class="form-cell" @click="openCompanyPicker">
            <text class="cell-label">防治企业</text>
            <picker
              :range="companyList"
              v-model="form.companyIdx"
              @change="onCompanyChange"
              style="flex: 1"
            >
              <view class="cell-value">
                <text
                  :class="{
                    'cell-placeholder':
                      form.companyIdx === '' || form.companyIdx === null,
                  }"
                >
                  {{
                    typeof form.companyIdx === "number" &&
                    companyList[form.companyIdx] !== undefined
                      ? companyList[form.companyIdx]
                      : "请选择"
                  }}
                </text>
                <text class="cell-arrow">&#xe601;</text>
              </view>
            </picker>
          </view>
          <view class="form-cell">
            <text class="cell-label">预约时间</text>
            <picker
              mode="date"
              v-model="form.date"
              @change="onDateChange"
              style="flex: 1"
            >
              <view class="cell-value">
                <text :class="{ 'cell-placeholder': !form.date }">
                  {{ form.date || "请选择" }}
                </text>
                <text class="cell-arrow">&#xe601;</text>
              </view>
            </picker>
          </view>
        </uni-forms>
      </view>
    </view>
    <!-- 按钮组吸底 -->
    <view class="btn-group">
      <button class="btn-cancel" @click="onCancel">取消</button>
      <button class="btn-submit" type="primary" @click="onSubmit">提交</button>
    </view>
    <!-- 视频预览弹窗 -->
    <view
      v-if="showVideoPreview"
      class="video-preview-modal"
      @click.stop="closeVideoPreview"
    >
      <view class="video-preview-container" @click.stop>
        <video
          :src="form.video"
          class="video-preview"
          controls
          autoplay
        ></video>
        <view class="close-preview" @click="closeVideoPreview">×</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        address: "",
        desc: "",
        images: [], // 本地图片路径
        serverImages: [], // 服务器上的图片URL
        companyIdx: "",
        date: "",
        video: "", // 单个视频路径
      },
      companyList: ["企业A", "企业B", "企业C"],
      uploading: false, // 是否正在上传图片
      showVideoPreview: false, // 控制视频预览弹窗
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    getLocation() {
      console.log("开始选择位置");
      // 先获取当前位置
      uni.getLocation({
        type: "gcj02",
        success: (res) => {
          console.log("当前位置：", res);
          // 获取到当前位置后，打开位置选择器
          uni.chooseLocation({
            latitude: res.latitude,
            longitude: res.longitude,
            success: function (res) {
              console.log("选择位置成功：", res);
              console.log("位置名称：" + res.name);
              console.log("详细地址：" + res.address);
              console.log("纬度：" + res.latitude);
              console.log("经度：" + res.longitude);
            },
            fail: function (e) {
              console.log("选择位置失败：", e);
            },
            complete: function (e) {
              console.log("选择位置完成：", e);
            },
          });
        },
        fail: (err) => {
          console.log("获取当前位置失败：", err);
          // 如果获取当前位置失败，仍然打开位置选择器
          uni.chooseLocation({
            success: function (res) {
              console.log("选择位置成功：", res);
              console.log("位置名称：" + res.name);
              console.log("详细地址：" + res.address);
              console.log("纬度：" + res.latitude);
              console.log("经度：" + res.longitude);
            },
            fail: function (e) {
              console.log("选择位置失败：", e);
            },
            complete: function (e) {
              console.log("选择位置完成：", e);
            },
          });
        },
      });
    },
    // 选择图片并立即上传
    chooseImage() {
      uni.chooseImage({
        count: 5 - this.form.images.length,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          console.log("选择图片", res);
          const tempFiles = res.tempFiles || [];

          // 检查图片大小
          let oversizeFound = false;
          tempFiles.forEach((file) => {
            if (file.size > 5 * 1024 * 1024) {
              // 5MB限制
              oversizeFound = true;
            }
          });

          if (oversizeFound) {
            uni.showToast({
              title: "图片大小不能超过5MB",
              icon: "none",
            });
            return; // 如果有超大图片，不继续处理
          }

          // 添加图片到列表
          const newImages = res.tempFilePaths || [];
          if (newImages.length === 0) return;

          // 显示上传中提示
          this.uploading = true;
          uni.showLoading({
            title: "上传中...",
            mask: true,
          });

          // 立即上传每张新选择的图片
          const uploadPromises = newImages.map((path, idx) => {
            return this.uploadSingleImage(path, idx);
          });

          // 等待所有图片上传完成
          Promise.all(uploadPromises)
            .then((results) => {
              // 将本地路径和服务器URL都保存到表单中
              this.form.images = [...this.form.images, ...newImages].slice(
                0,
                5
              );
              // 筛选出成功上传的图片URL
              const successUrls = results.filter((url) => url);
              this.form.serverImages = [
                ...this.form.serverImages,
                ...successUrls,
              ];

              this.uploading = false;
              uni.hideLoading();
              uni.showToast({
                title: "上传成功",
                icon: "success",
              });
              console.log("当前图片列表", this.form.images);
              console.log("服务器图片URL", this.form.serverImages);
            })
            .catch((err) => {
              this.uploading = false;
              uni.hideLoading();
              uni.showToast({
                title: "图片上传失败",
                icon: "none",
              });
              console.error("上传失败", err);
            });
        },
      });
    },

    // 上传单张图片
    uploadSingleImage(imagePath, index) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: "https://your-server-api.com/upload", // 替换为你的服务器上传接口
          filePath: imagePath,
          name: "file",
          formData: {
            index: index,
            type: "image",
          },
          success: (uploadFileRes) => {
            try {
              // 解析服务器返回的数据
              const data = JSON.parse(uploadFileRes.data);
              if (data.code === 0 && data.url) {
                // 返回服务器的图片URL
                resolve(data.url);
              } else {
                console.error("上传失败", data);
                resolve(null); // 解析失败但不中断其他上传
              }
            } catch (e) {
              // 当前环境为开发环境，模拟上传成功
              if (process.env.NODE_ENV === "development") {
                // 模拟服务器返回的URL
                const mockUrl = `https://example.com/uploads/image_${Date.now()}_${index}.jpg`;
                resolve(mockUrl);
              } else {
                console.error("解析上传响应失败", e);
                resolve(null); // 解析失败但不中断其他上传
              }
            }
          },
          fail: (err) => {
            // 开发环境模拟上传
            if (process.env.NODE_ENV === "development") {
              console.log("开发环境模拟上传...");
              const mockUrl = `https://example.com/uploads/image_${Date.now()}_${index}.jpg`;
              resolve(mockUrl);
            } else {
              console.error("上传图片失败", err);
              resolve(null); // 上传失败但不中断其他上传
            }
          },
        });
      });
    },

    // 删除图片
    removeImage(index) {
      if (index !== -1 && this.form.images.length > index) {
        // 同时删除本地路径和服务器URL
        this.form.images.splice(index, 1);
        if (this.form.serverImages.length > index) {
          this.form.serverImages.splice(index, 1);
        }
      }
      console.log("删除后图片列表", this.form.images);
      console.log("删除后服务器图片URL", this.form.serverImages);
    },

    // 预览图片
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.form.images,
        indicator: "number",
        loop: true,
        longPressActions: {
          itemList: ["保存图片", "发送给朋友"],
          success: function (data) {
            console.log("选中了第" + (data.tapIndex + 1) + "个按钮");
          },
          fail: function (err) {
            console.log(err);
          },
        },
      });
    },

    onCancel() {
      // 重置表单
      this.form = {
        address: "",
        desc: "",
        images: [],
        serverImages: [],
        companyIdx: "",
        date: "",
        video: "",
      };
    },

    onSubmit() {
      // 如果正在上传，不允许提交
      if (this.uploading) {
        uni.showToast({
          title: "文件上传中，请稍候...",
          icon: "none",
        });
        return;
      }

      this.$refs.formRef
        .validate()
        .then((res) => {
          // 表单验证通过
          // 图片验证：检查serverImages数组
          if (!this.form.serverImages || this.form.serverImages.length === 0) {
            uni.showToast({
              title: "请上传图片",
              icon: "none",
            });
            return;
          }

          console.log("提交的表单数据", this.form);

          // 直接提交表单，因为图片已经上传
          const formData = {
            ...this.form,
            // 只发送已上传的服务器图片
            images: this.form.serverImages,
          };

          // 显示提交中提示
          uni.showLoading({
            title: "提交中...",
          });

          // 这里执行最终的表单提交到服务器
          console.log("最终提交的数据", formData);

          // 模拟提交成功
          setTimeout(() => {
            uni.hideLoading();
            uni.showToast({
              title: "提交成功",
              icon: "success",
            });
          }, 1000);
        })
        .catch((err) => {
          uni.showToast({ title: "请完善表单", icon: "none" });
        });
    },

    chooseVideo() {
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: (res) => {
          // 显示加载中
          uni.showLoading({ title: "视频上传中...", mask: true });
          // 模拟接口请求
          setTimeout(() => {
            uni.hideLoading();
            // 假设上传成功，返回一个服务器视频URL
            // 实际开发中这里用 res.tempFilePath 去上传，拿到服务器返回的url
            // 这里模拟用本地路径
            this.form.video = res.tempFilePath;
            uni.showToast({ title: "上传成功", icon: "success" });
          }, 1500);
        },
        fail: () => {
          uni.showToast({ title: "选择视频失败", icon: "none" });
        },
      });
    },
    removeVideo() {
      this.form.video = "";
    },
    previewVideo() {
      this.showVideoPreview = true;
    },
    closeVideoPreview() {
      this.showVideoPreview = false;
    },
    onCompanyChange(e) {
      this.form.companyIdx = e.target.value;
      console.log("picker change:", e, this.form.companyIdx);
    },
    onDateChange(e) {
      this.form.date = e.target.value;
      console.log("date change:", e, this.form.date);
    },
  },
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.report-bg {
  box-sizing: border-box;
  min-height: 100vh;
  background: #f3f3fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding-bottom: 90rpx;
  width: 100vw;
  overflow-x: hidden;
}
.report-content {
  width: 100vw;
  max-width: 750rpx;
  min-width: 320rpx;
  padding: 32rpx;
  padding-top: 132rpx;
  padding-bottom: 120rpx;
  margin-bottom: 90rpx;
  ::v-deep .uni-forms-item {
    margin-bottom: 0 !important;
    padding: 10rpx 0 !important;
  }
  .line {
    width: 100%;
    height: 2rpx;
    background-color: #f4f5fb;
  }
  // 媒体查询物理像素比为3的情况
  @media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
    .line {
      -webkit-height: 3rpx;
      height: 3rpx;
    }
  }
  .content {
    background: #fff;
    border-radius: 8rpx;
    padding: 0 30rpx 30rpx;
    ::v-deep .uni-easyinput__content {
      border: none !important;
      background: transparent !important;
      text-align: right;
      padding: 0 !important;
      box-shadow: none !important;
    }
    ::v-deep .uni-easyinput__content-input {
      text-align: right !important;
      background: transparent !important;
    }
    ::v-deep .desc-textarea .uni-easyinput__content,
    ::v-deep .desc-textarea .uni-easyinput__content-input {
      text-align: left !important;
      padding-left: 0 !important;
    }
    ::v-deep .input-padding {
      padding-left: 0 !important;
    }

    ::v-deep .uni-file-picker__container {
      padding-left: 0;
      padding-top: 0;
      margin-bottom: 20rpx;
    }
    ::v-deep .file-picker__box {
      border-radius: 16rpx;
    }
    ::v-deep .uni-file-picker__lists {
      justify-content: flex-start;
      margin-bottom: 20rpx;
    }
    ::v-deep .uni-file-picker__lists-box {
      margin-right: 16rpx;
      margin-bottom: 16rpx;
    }
    ::v-deep .file-picker__box-content {
      width: 196rpx !important;
      height: 148rpx !important;
      border-radius: 16rpx;
    }
  }
}
// .image-tip {
//   font-size: 22rpx;
//   color: #999;
//   margin-top: 6rpx;
// }
.report-header {
  width: 750rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  .back-btn {
    position: absolute;
    left: 42rpx;
    top: 0;
    height: 100rpx;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #222;
    cursor: pointer;
    z-index: 2;
  }
  .report-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
    margin: 0 auto;
    z-index: 1;
  }
}
.report-form {
  .form-item {
    margin-bottom: 32rpx;
    .label {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: left;
      font-size: 14px;
      color: #606266;
      height: 36px;
      padding: 0 12px 0 0;
      vertical-align: middle;
      flex-shrink: 0;
      box-sizing: border-box;
    }
    .desc-textarea {
      width: 100%;
      // border: 1.5rpx solid #e5e6eb;
      // border-radius: 16rpx;
      // padding: 20rpx;
      font-size: 28rpx;
      // background: #fafbfc;
      box-sizing: border-box;
      transition: border 0.2s;
      &:focus {
        border: 1.5rpx solid #007aff;
        background: #fff;
      }
    }
    .desc-count {
      font-size: 24rpx;
      margin-top: 4rpx;
    }
    .value {
      font-size: 28rpx;
      color: #222;
      margin-top: 4rpx;
      font-weight: bold;
    }
    .input,
    .textarea {
      width: 100%;
      border: 1.5rpx solid #e5e6eb;
      border-radius: 16rpx;
      padding: 20rpx 20rpx;
      font-size: 28rpx;
      margin-top: 8rpx;
      background: #fafbfc;
      box-sizing: border-box;
      transition: border 0.2s;
    }
    .input:focus,
    .textarea:focus {
      border: 1.5rpx solid #007aff;
      background: #fff;
    }
    .textarea {
      min-height: 120rpx;
      resize: none;
    }
    .img-list {
      display: flex;
      align-items: center;
      .img-item {
        position: relative;
        margin-right: 16rpx;
        .img {
          width: 120rpx;
          height: 120rpx;
          border-radius: 16rpx;
          border: 1.5rpx solid #e5e6eb;
          object-fit: cover;
          max-width: 100%;
        }
        .img-del {
          position: absolute;
          top: -12rpx;
          right: -12rpx;
          background: #fff;
          border-radius: 50%;
          color: #f00;
          font-size: 28rpx;
          width: 36rpx;
          height: 36rpx;
          text-align: center;
          line-height: 36rpx;
          box-shadow: 0 0 8rpx #ccc;
          cursor: pointer;
          border: 1rpx solid #eee;
        }
      }
      .img-upload {
        width: 120rpx;
        height: 120rpx;
        background: #f4f6fa;
        border: 1.5rpx dashed #bfc4cc;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48rpx;
        color: #bfc4cc;
        cursor: pointer;
        transition: border 0.2s;
      }
      .img-upload:hover {
        border: 1.5rpx solid #007aff;
        color: #007aff;
      }
    }
    .video-upload {
      width: 200rpx;
      height: 140rpx;
      background: #f4f6fa;
      border: 1.5rpx dashed #bfc4cc;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 8rpx;
      cursor: pointer;
      .video {
        width: 200rpx;
        height: 140rpx;
        border-radius: 16rpx;
        object-fit: cover;
        max-width: 100%;
      }
      .video-placeholder {
        font-size: 48rpx;
        color: #bfc4cc;
      }
    }
    .video-upload:hover {
      border: 1.5rpx solid #007aff;
      color: #007aff;
    }
    .picker-value {
      width: 100%;
      border: 1.5rpx solid #e5e6eb;
      border-radius: 16rpx;
      padding: 20rpx 20rpx;
      font-size: 28rpx;
      background: #fafbfc;
      color: #222;
      margin-top: 8rpx;
      box-sizing: border-box;
      transition: border 0.2s;
    }
    .picker-value:active,
    .picker-value:focus {
      border: 1.5rpx solid #007aff;
      background: #fff;
    }
  }
}
.btn-group {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100vw;
  max-width: 750rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 24rpx 32rpx 32rpx 32rpx;
  box-shadow: 0 -2rpx 12rpx 0 rgba(0, 0, 0, 0.04);
  z-index: 90;
  transform: translateX(-50%);
  .btn-cancel {
    flex: 1;
    margin-right: 24rpx;
    background: #fff;
    color: #007aff;
    border: 1.5rpx solid #007aff;
    border-radius: 32rpx;
    font-size: 28rpx;
    height: 72rpx;
    font-weight: 500;
  }
  .btn-submit {
    flex: 1;
    background: linear-gradient(90deg, #1e90ff 0%, #007aff 100%);
    color: #fff;
    border: none;
    border-radius: 32rpx;
    font-size: 28rpx;
    height: 72rpx;
    font-weight: 500;
    box-shadow: 0 2rpx 8rpx 0 rgba(30, 144, 255, 0.1);
  }
}
/* 自定义图片上传样式 */
.custom-upload {
  margin-top: 10rpx;
  .image-list,
  .video-list {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20rpx;
    width: 100%;
  }
  .image-item,
  .video-item {
    position: relative;
    width: calc((100% - 40rpx) / 3); // 一行放3个，考虑间距
    height: 148rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;

    // 每行第3个元素（3的倍数）不要右边距
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
  .upload-image,
  .upload-video {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    border: 1.5rpx solid #e5e6eb;
    object-fit: cover;
  }
  .delete-btn {
    position: absolute;
    top: -12rpx;
    right: -12rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background-color: #707070;
    color: #fff;
    text-align: center;
    line-height: 32rpx;
    font-size: 28rpx;
    box-shadow: 0 0 8rpx #707070;
    z-index: 2;
    border: 1rpx solid #707070;
  }
  .add-image,
  .add-video {
    width: calc((100% - 40rpx) / 3); // 与图片宽度一致
    height: 148rpx;
    background: #f4f6fa;
    border: 1.5rpx dashed #bfc4cc;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
  }

  // 视频项样式调整 - 使视频项占据更大空间
  .video-item,
  .add-video {
    width: 260rpx;
    height: 160rpx;
    margin-right: 0;
  }

  .upload-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx;

    text {
      color: #fff;
      font-size: 24rpx;
    }
  }

  .add-icon {
    font-size: 48rpx;
    color: #bfc4cc;
    line-height: 1;
    margin-bottom: 6rpx;
  }
  .add-text {
    font-size: 24rpx;
    color: #bfc4cc;
  }
  // .image-tip {
  //   font-size: 22rpx;
  //   color: #999;
  //   margin-bottom: 10rpx;
  // }
}

/* 视频预览弹窗样式 */
.video-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .video-preview-container {
    position: relative;
    width: 90vw;
    height: 50vh;
    border-radius: 8rpx;
    overflow: hidden;
  }

  .video-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
  }

  .close-preview {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 50rpx;
    height: 50rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    z-index: 3;
  }
}
.fweight {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #333333;
}
.textGray {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #bababa;
}
.video-list {
  ::v-deep .uni-video-bar {
    display: none !important;
  }
  ::v-deep .uni-video-cover {
    display: none !important;
  }
}
.form-cell {
  display: flex;
  align-items: center;
  height: 48px;
  // padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  .cell-label {
    color: #606266;
    font-size: 14px;
    flex-shrink: 0;
  }
  .cell-value {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #222;
    font-size: 14px;
    .cell-placeholder {
      color: #bababa;
    }
    .cell-arrow {
      font-family: iconfont, Arial;
      font-size: 16px;
      color: #bababa;
      margin-left: 4px;
    }
  }
}
</style>
